<template>
    <section class="server_register_form overflowYAll">
      <!-- <p class="title"><span @click="goBack"><i class="el-icon-back"></i>服务资源修改</span></p> -->
        
    	<el-form ref="form" :model="form" label-width="106px"  v-loading="loading" >
    	<span class="block">基本信息</span>	
    	
			  <el-form-item label="资源名称" reuqired>
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="资源标识">
			    <span>由系统自动生成</span>
			  </el-form-item>
			  
			  <el-form-item label="资源所在网段" reuqired>
			    	<el-radio-group v-model="form.segmentId" @change ="chooseResource" >
				      <el-radio v-for="(item,index) in resocureRadio" :label="item.id" :value="item">{{item.name}}</el-radio>
				    </el-radio-group>
    		</el-form-item>
			  
			  <el-form-item label="服务方名称" reuqired >
				 	<el-select v-model="form.producerId" placeholder="请选择">
				      <el-option v-for="(item,index) in fuwuName" :key="index" :label="item.name" :value="item.id"></el-option>
				    </el-select>
			  </el-form-item>
			  
			  <el-form-item label="服务类型" reuqired>
			    <el-radio-group v-model="form.type">
			      <el-radio label="1" @change="fuwuTypeFileButton=false">标准服务</el-radio>
			      <el-radio label="2" @change="fuwuTypeFileButton=true">个性化服务</el-radio>
			    </el-radio-group>
			    <input type="file" name="fuwuTypeFile" id="fuwuTypeFile" value="" style="display: none;"/>
			    	
			    	<!--<el-button type="primary" 
			    	style="float: right;"
			    	 @click="upload('fuwuTypeFile')" 
			    	 v-show="fuwuTypeFileButton"
			    	 >上传JAR包</el-button>-->
			    	 
			    	 <el-upload
			    	 	
			    	  v-show="fuwuTypeFileButton"
					  class="upload-demo"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :before-remove="beforeRemove"
					  multiple
					  :limit="3"
					  :on-exceed="handleExceed"
					  :file-list="fileList">
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
			    	 
			  </el-form-item>
			  
				<!--业务类型，信息类型多选-->
				 <yw-info-desc-form 
			 	 :yewuType="yewuType"
			 	 :infoType="infoType"
			 	 :timeSubmit="ywInfoDescTimeSubmit"
			 	 @outPutForm = "ywInfoDescOutPutForm"
			 	 :hasDataYwInfoDesc="hasDataYwInfoDesc"
			 	 ></yw-info-desc-form>
				
<!--*******************************数据来源************************************************************************-->				
					
			<p class="dashed"></p>
			<span class="block">资源信息</span>	
				<el-form-item label="数据来源(单选)" reuqired>
			    	<el-radio-group v-model="form.dataOrigin" @change="change">
				      <el-radio-button class="box-radio" label="jiekou">接口</el-radio-button>
				      <el-radio-button class="box-radio" label="wenjian">文件</el-radio-button>
				      <el-radio-button class="box-radio"  label="datadb">数据库</el-radio-button>
				    </el-radio-group>
    			</el-form-item>
    			
    			<!--接口的form-->
    			<jiekou-form :timeSubmit="jiekouTimeSubmit" 
    				:resourceWeb= "resourceWeb"
    				 @outPutForm = "jiekouOutPutForm" 
    				 :HasDataForm="HasDataForm"
    				 v-show="secondForm==='jiekou'"></jiekou-form>
    			<!--文件的form-->
    			<wenjian-form  :timeSubmit="wenjianTimeSubmit" 
    				:resourceWeb= "resourceWeb"
    				 @outPutForm = "wenjianOutPutForm" 
    				 :HasDataForm="HasDataForm"
    				  v-show="secondForm==='wenjian'"></wenjian-form>
    			<!--数据库的form-->
    			<datadb-form :timeSubmit="datadbTimeSubmit"
    				:resourceWeb= "resourceWeb"
    				  @outPutForm = "datadbOutPutForm" 
    				  :HasDataForm="HasDataForm"
    				   v-show="secondForm==='datadb'"></datadb-form>
<!--************************************通用策略*******************************************************************-->			
		<p class="dashed"></p>
		<span class="block">通用策略</span>			
		
		<special-cenue :hasData="cenueHasData" :timeSubmit="tongyongTimeSubmit"  @outPutForm = "tongyongOutPutForm"></special-cenue>
		
		<p class="dashed"></p>
		<span class="block">发布信息</span>		
				
    			<el-form-item label="可发布区域" reuqired>
			    	<el-checkbox-group v-model="form.nodeIds" @change="fabuAreaChange">
				       <el-checkbox  v-for="(item,index) in fabuAreaRadio" :label="item.id" :name = "item.name">{{item.name}}</el-checkbox>
				    </el-checkbox-group>
    			</el-form-item>
    			
    			<!--<echats-bing style="width: 200px;height: 200px;"></echats-bing>-->
    			<three-bing></three-bing>
		
		<p class="dashed"></p>
		<span class="block">其他</span>	
				<!--<el-form-item label="调用文档">
					<el-input type="textarea" placeholder="100字以内"v-model="form.wendang"></el-input>
					<el-button type="primary" style="margin-top: 15px;" @click="uploadFuJian">上传附件</el-button>
					<input type="file" name="wendang_file" id="wendang_file" value="" style="display: none;" />
    			</el-form-item>-->
		
		<p class="fixed_button">
			<el-button type="primary" @click="goBack">取消</el-button>
			<el-button type="primary" @click = "submit" >确定</el-button>
		</p>
		</el-form>
    </section>
</template>

<script>
	
	import specialCenue from "../common/specialCenue"
    import jiekouForm from "./components/jiekouForm"
    import wenjianForm from "./components/wenjianForm"
    import datadbForm from "./components/datadbForm"
    import echatsBing from "../common/echats_bing"
    import threeBing from "../common/threeBing"
    import ywInfoDescForm from "../common/yw_info_desc"
    import {
    	componentSearchName,
    	componentServerRegister,
    	componentServerRegisterGetFabuArea,
    	componentGetDetail,
    	computedDealRegisterUpdata,
    	componentServerRegisterFormUpdata
    } from "../common/js_css_img/serverResourceComputed"
    import {
    	everyMonthCheckBoxJson,
    	everyWeekCheckBoxJson,
    	jiekouFormTableLabelJson
    } from "../common/js_css_img/jsonDiy"
    export default {
    	props:{
    		treeSeach:Object,
    		id:Number,
    		updataId:Number,
    		
    	},
    	components:{
    		ywInfoDescForm,
    		jiekouForm,
    		wenjianForm,
    		datadbForm,
    		echatsBing,
    		threeBing,
    		specialCenue
    	},
        data(){
          return {
          		loading:false,
          		fileList:[],/*上传的文件*/
          		resourceWeb:0,/*选中的资源网段*/
          		datadbTimeSubmit :false,/*数据库字段*/
          		jiekouTimeSubmit:false,/*接口form*/
          		wenjianTimeSubmit:false,/*文件form的form值*/
          		ywInfoDescTimeSubmit:false,/*业务类型，信息类型，描述form的值*/
          		tongyongTimeSubmit:false,/*通用策略传form的值*/
          		hasChooseFabuAreaRadio:'',
          		everyMonthVisible:false,
          		everyMonth:[],/*多选，选择日*/
          		secondForm:'',/*第二个表单*/
          		fuwuTypeFileButton:false,
          			cenueHasData:{
          			frequency:'',
					frequencyUnit:'',
					flow:'',
					flowUnit:'',
					timeTpye:'',
					timeValue:""
          		},
          		hasDataYwInfoDesc:{
          			businessType:[],
          			infoType:[],
          			describe:'',
          		},
          		HasDataForm:{
          			inServiceDataSource:{},
          			outServiceDataSourceList:[],
          		},
          		form:{
          			id:0,  //必传
          			name:'',
          			producerId:'',
          			businessType:[],
          			infoType:[],
          			nodeIds:[],
          			type:'',
          			segmentId:'',
          			describe:'',
          			accessTactics:{},
					inServiceDataSource:{/*输入*/
					
					},
					outServiceDataSourceList:[/*输出*/
						
					]
          		},
          		jiekouFormTableData:[
          			{
          				canshuName :'参数名',
	          			chineseName:"中文名",
	          			yuanData:'对应的元数据',
	          			ishas:"是否必填",
	          			ischeck:"是否校验",
          			}
          		],
          		jiekouFormTableLabel:jiekouFormTableLabelJson,
          		fuwuName:[],
          		yewuType:[],
          		infoType:[],
          		everyWeekCheckBox:everyWeekCheckBoxJson,
          		everyMonthCheckBox:everyMonthCheckBoxJson,
          		resocureRadio:[],/*网段信息*/
          		fabuAreaRadio:[],
          };
        },
        methods: {
        		/*上传相关操作*/
        	    handleRemove(file, fileList) {
			        console.log(file, fileList);
			    },
			    handlePreview(file) {
			        console.log(file);
			    },
			    handleExceed(files, fileList) {
			        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			    },
			    beforeRemove(file, fileList) {
			        return this.$confirm(`确定移除 ${ file.name }？`);
			    },
			    /*上传相关操作*/
        		upload(val){
        			document.getElementById(val).click();
        		},
        		change(val){
					this.secondForm = val;
        		},
        		chooseEveryMonth(){
        			console.log(this.form.everyMonth);
        			this.form.everyMonth = this.everyMonth;
        			this.everyMonthVisible=false;
        		},
        		uploadFuJian(){
        			document.getElementById("wendang_file").click();
        		},
        		fabuAreaChange(val){
        			console.log(val);
        		},
        		goBack(){
        			this.$emit('goBack');
        		},
        		chooseResource(val){/*选中资源网段*/
        			console.log(val);
        			this.resourceWeb = val;
        			componentServerRegisterGetFabuArea(this,val)
        		},
        		submit(){/*这样一步一步地执行下去，真的很烦，没什么用*/
        			this.loading=true;
        			this.tongyongTimeSubmit= !this.tongyongTimeSubmit;
        			console.log(this.form);	
        		},
        		tongyongOutPutForm(val){
        			console.log(val);
							if(val.flow===''&&val.frequency===''&&val.timeTpye===''){
								this.form.accessTactics =null;
							}else{
								this.form.accessTactics =val;
							}
        			this.ywInfoDescTimeSubmit= !this.ywInfoDescTimeSubmit;
        		},
        		ywInfoDescOutPutForm(val){
        			console.log(val);
        			this.form.businessType =val.businessType;
        			this.form.infoType =val.infoType;
        			this.form.describe =val.describe;
//      			this.ywInfoDescTimeSubmit= !this.ywInfoDescTimeSubmit;
					
					switch (this.secondForm){
						case 'jiekou':
						this.jiekouTimeSubmit =!this.jiekouTimeSubmit
						break;
						case 'wenjian':
						this.wenjianTimeSubmit =!this.wenjianTimeSubmit
						break;
						case 'datadb':
						this.datadbTimeSubmit =!this.datadbTimeSubmit
						break;
						default:
						break;
					}
//        			
        		},
        		wenjianOutPutForm(val){
        			
        			this.form.inServiceDataSource =val.inServiceDataSource;
        			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
        			console.log(this.form);
        			componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
        			this.loading=false;
        		},
        		jiekouOutPutForm(val){
        			console.log(val);
        			this.form.inServiceDataSource =val.inServiceDataSource;
        			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
        			componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
        			this.loading=false;
        		},
        		datadbOutPutForm(val){
        			console.log(val);
        			this.form.inServiceDataSource =val.inServiceDataSource;
        			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
        			componentServerRegisterFormUpdata(this,this.form);/*提交更新整个表单*/
        			this.loading=false;
        		}
        },
        mounted(){
        			this.yewuType=this.treeSeach.business_type;
        			this.infoType=this.treeSeach.info_type;
        			this.resocureRadio = this.treeSeach.segment;
        			componentSearchName(this,{pageAble:false,type:1});
//      			componentGetDetail(this,{id:this.updataId});
        			computedDealRegisterUpdata(this,{id:this.updataId})
        },
        watch:{
        	treeSeach:{/*深度检测这个对象的变化*/
        		 handler(newVal, oldVal){
        		 	this.yewuType=this.treeSeach.business_type;
        			this.infoType=this.treeSeach.info_type;
        			this.resocureRadio = this.treeSeach.segment;
            	},
            	deep:true
        	},
        	id(newVal){
//      		componentGetDetail(this,newVal);
        	},
        	updataId(newVal){/*更新ID*/
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/
        		computedDealRegisterUpdata(this,{id:newVal});
        		
        	}
        }
  };
</script>

<style>
    .server_register_form .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
    }
    .server_register_form .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .server_register_form .title .el-icon-back{
    	margin-right: 15px;
    }
    
    .server_register_form  .box_checkbox{
    	margin: 5px !important;
    }
    .server_register_form  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .server_register_form  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .server_register_form  .block{
   	 font-size: 16px;
   	 margin-bottom: 10px;
    	display: inline-block;
    margin-top: 20px;
   }
  .server_register_form  .dashed{
    border-bottom: dashed 1px #afa4a4;
  }
  .server_register_form  .fixed_button{
  	position: fixed;
    bottom: 0px;
    background: #e0eefd80;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .server_register_form  .box-radio .el-radio-button__inner{
  	border-radius: 60px;
  	margin: 0 10px;
  }
  .server_register_form .second_form{
  	background: #f5f5f5;
  	padding: 20px;
  }
  
 .server_register_form .block_radio{
 	display: block;
 	margin: 0 0 25px 0;
 }
 .server_register_form .el-radio+.el-radio{
 	/*margin-left: unset;*/
 }
 .server_register_form .everyDay{
 	    position: absolute;
	    top: 25px;
	    left: 100px;
 }
 .server_register_form .everyWeek{
 	 position: absolute;
    top: 65px;
    left: 95px;
 }
    
  .server_register_form .everyMonth_span{
  	    position: relative;
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin: 0 5px;
  }
  
  
  .server_register_form .everyMonth_span .el-icon-circle-close-outline{
  	    position: absolute;
    top: -5px;
    right: -5px;
  }
 .server_register_form label.el-checkbox.everyMonth_checkbox{
 	width: 60px;
 	margin-left: 30px;
 }
  .server_register_form .everyMonth{
  	position: absolute;
    top: 115px;
    left: 100px;
  }
     
</style>